<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .button {
    margin: 100px;
    appearance: none;
    /*重新设置外表 none则不受浏览器默认行为的影响*/
    position: relative;
    padding: 1em 2em;
    /*相对自身的字体大小的单位*/

    border: none;
    color: white;
    font-size: 1.2em;
    display: inline-block;
    cursor: pointer;
    outline: none;
    /* 轮廓 boder是盒模型的一部分，outline不是，所以不会占有盒模型的尺寸分配 
      盒模型的种类 标准；ie
    */
    box-sizing: border-box;
    background-color: #f72359;
    border-radius: 100px;
    overflow: hidden;
  }

  .button::before {
    --size: 0;
    /* css next */

    position: absolute;
    content: '';

    /* 不用js动态修改 before的位置 
      css4提供了css变量
      以--开头
    */
    left: var(--x);
    right: var(--y);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #4405f7, transparent);
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;

  }

  .button:hover::before {
    --size: 400px;
  }
</style>

<body>
  <div class="button">我是一个按钮</div>
  <script>
    document.querySelector('.button')
      .onmousemove = e => {
        // pageX/pageY相对整个页面页面的偏移
        const x = e.pageX - e.target.offsetLeft
        const y = e.pageY - e.target.offsetTop

        // css样式变量
        e.target.style.setProperty('--x', `${x}px`)
        e.target.style.setProperty('--y', `${y}px`)
      }
  </script>
</body>

</html>